<template>
  <el-table :data="articleList" :header-cell-style="{textAlign:'center'}" stripe style="width: 100%;border-radius: 5px 5px 0 0;">
    <el-table-column label="标题"  prop="articleTitle" show-overflow-tooltip>
      <template #default="scope">
        <router-link class="RLink" :to="`/showArticle/${scope.row.articleId}`">
          {{ scope.row.articleTitle }}
        </router-link>
      </template>
    </el-table-column>
    <el-table-column align="center" label="发布时间"  prop="publishTime"></el-table-column>
    <el-table-column align="center" label="文章类型">
      <template #default="scope">
        <el-tag>{{articleType[scope.row.articleType]}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column align="center" label="操作">
      <template #default="scope">
        <el-button @click="deleteArticleById(scope.row.articleId)" type="primary" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      style="background-color: #ffffff;border-radius:0  0 5px 5px;justify-content: center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageSize"
      :layout="layout"
      :total="total"
      :pager-count=5
  >
  </el-pagination>
</template>

<script>
import {deleteArticle, deleteArticles, getArticleByUserId} from "@/api/multimedia";
import {getDevice} from "@/utils/get-device";

export default {
  name: "announce",
  props:['userId'],
  data(){
    return{
      articleType:{'ANNOUNCE':'公告','NEWS':'新闻'},
      total:0,
      articleList:[],
      currentPage:1,
      pageSize:10,
      layout:'total, sizes, prev, pager, next, jumper'
    }
  },
  mounted() {
  },
  watch:{
    userId:{
      immediate:true,
      handler(){
        if (getDevice()){
          this.layout='total,prev, pager, next'
        }
        this.getArticleList()
      }
    }
  },
  methods:{
    deleteArticleById(articleId){
      deleteArticle(articleId).then(()=>{
        this.getArticleList()
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getArticleList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getArticleList()
    },
    getArticleList(){
      getArticleByUserId(this.userId,this.currentPage,this.pageSize,'ANNOUNCE').then(response =>{
        this.total=response.data.total
        this.articleList=response.data.articleList
      })
    }
  }
}
</script>

<style lang="less" scoped>
.RLink{
  padding: 4px;
  text-decoration: none;
  color: #000000;
&:hover{
   color: #666;
 }
}
</style>
